<template>
  <div>
    <h1>欢迎来到第一个页面</h1>
    <p>六王毕，四海一；蜀山兀，阿房出。覆压三百余里，隔离天日。骊山北构而西折，直走咸阳。二川溶溶，流入宫墙。</p>
    <p>五步一楼，十步一阁；廊腰缦回，檐牙高啄；各抱地势，钩心斗角。盘盘焉，囷囷焉，蜂房水涡，矗不知其几千万落！</p>
    <p>长桥卧波，未云何龙？复道行空，不霁何虹？高低冥迷，不知西东。歌台暖响，春光融融；舞殿冷袖，风雨凄凄。</p>

    <div class="mainContent">
      <label>用户列表</label>
      <table>
        <thead>
          <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>角色</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody v-for="model in userList" :key="model.userId">
          <tr>
            <td>{{model.userId}}</td>
            <td>{{model.userName}}</td>
            <td>{{model.role}}</td>
            <td v-on:click="getInfo(model)">查看详情</td>
          </tr>
        </tbody>
      </table>
    </div>

    <ul>
      <li v-for="n in intList" :key="n">{{n}}</li>
    </ul>

  </div>
</template>

<script  type="text/javascript">
export default {
  name: 'FirstPage',
  data () {
    return {
      userList: [ ],
      intList: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList: function () {
      console.info('start request')
      var url = '/vueApi/vueList'
      this.$http.get(url).then(function (res) {
        console.info(res)
        console.info(res.data.intList)
        this.intList = res.data.intList
        this.userList = res.data.userList
      }, function () {
        console.info('请求失败！')
      })
    },
    getInfo: function (e) {
      console.info('start vueUserInfo' + e.userId)
      this.$router.push({path: '/info', query: {userId: e.userId}})
      console.info('end vueUserInfo' + e.userId)
    }
  }
}
</script>

<style>
  .mainContent {
      background-color: burlywood;
      font-size: 30px;
  }
</style>
